<script setup lang="ts">
import { ref, onMounted } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import { getDeptListApi } from "@/api/system/dept";
import { setDisabledForTreeOptions, handleTree } from "@/utils/tree";

/** TODO 有其他方式  来换掉这个props 父子组件传值吗？ */
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    id: 0,
    deviceDeptId: 0,
    deviceId: "",
    deviceCode: "",
    deviceName: "",
    deviceIp: "",
    deviceType: "",
    deviceMac: "",
    deviceOpenCode: "",
    deviceStatus: null,
    deviceAddress: "",
    deviceVersion: "",
  }),
  // deptListOptions: () => []
});
const deptOptions = ref([]);// ref(props.deptListOptions);

onMounted(async () => {
  const { data } = await getDeptListApi();
  const deptListOptions = setDisabledForTreeOptions(handleTree(data), "status");
  deptOptions.value = deptListOptions;
})

const deviceData = ref(props.formInline);

const formRuleRef = ref();

function getFormRuleRef() {
  return formRuleRef.value;
}

defineExpose({ getFormRuleRef });
</script>

<template>
  <el-form
    ref="formRuleRef"
    :model="deviceData"
    :rules="formRules"
    label-width="82px"
  >
    <el-form-item label="设备归属" prop="deviceDeptId">
      <el-cascader
        class="w-full"
        v-model="deviceData.deviceDeptId"
        :options="deptOptions"
        :props="{
          value: 'id',
          label: 'deptName',
          emitPath: false,
          checkStrictly: true
        }"
        clearable
        placeholder="请选择设备归属"
      />
    </el-form-item>
    <el-form-item label="设备ID" prop="deviceId">
      <el-input
        v-model="deviceData.deviceId"
        clearable
        placeholder="请输入设备ID"
      />
    </el-form-item>
    <el-form-item label="设备编号" prop="deviceCode">
      <el-input
        v-model="deviceData.deviceCode"
        clearable
        placeholder="请输入设备编号"
      />
    </el-form-item>
    <el-form-item label="设备名称" prop="deviceName">
      <el-input
        v-model="deviceData.deviceName"
        clearable
        placeholder="请输入设备名称"
      />
    </el-form-item>
    <el-form-item label="设备IP" prop="deviceIp">
      <el-input
        v-model="deviceData.deviceIp"
        clearable
        placeholder="请输入设备IP"
      />
    </el-form-item>
    <el-form-item label="设备类型" prop="deviceType">
      <el-select
        v-model="deviceData.deviceType"
        placeholder="请选择"
        clearable
        class="!w-[180px]"
      >
        <el-option
          key="9999"
          label="门禁设备"
          value="9999"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="设备MAC" prop="deviceMac">
      <el-input
        v-model="deviceData.deviceMac"
        clearable
        placeholder="请输入设备MAC"
      />
    </el-form-item>
    <el-form-item label="设备方向" prop="deviceOpenCode">
      <el-select
        v-model="deviceData.deviceOpenCode"
        placeholder="请选择设备方向"
        clearable
        class="!w-[180px]"
      >
        <el-option
          key="3306"
          label="进口"
          value="3306"
        />
        <el-option
          key="3307"
          label="出口"
          value="3307"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="设备地址" prop="deviceAddress">
      <el-input
        v-model="deviceData.deviceAddress"
        clearable
        placeholder="请输入设备地址"
      />
    </el-form-item>
    <el-form-item label="设备状态" prop="deviceStatus">
      <el-select
        v-model="deviceData.deviceStatus"
        placeholder="请选择设备状态"
        clearable
        class="!w-[180px]"
      >
        <el-option
          key="0"
          label="离线"
          :value="0"
        />
        <el-option
          key="1"
          label="在线"
          :value="1"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="设备地址" prop="deviceAddress">
      <el-input
        v-model="deviceData.deviceAddress"
        clearable
        placeholder="请输入设备地址"
      />
    </el-form-item>
    <el-form-item label="设备版本" prop="deviceVersion">
      <el-input
        v-model="deviceData.deviceVersion"
        clearable
        placeholder="请输入设备版本"
      />
    </el-form-item>
  </el-form>
</template>
